<template>
	<view class="Merchandise">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-新建-急速录入</view>
		</view>
		<!-- 搜索原料 -->
		<view class="search">
			<view>
				<image src="../../static/home/sousuo.png" mode=""></image>
				<input type="text" value="" placeholder="搜索原料" />
			</view>
		</view>
		
		<!-- 商品分组 -->
		<view class="group">
			 <view>商品分组</view>
			<view class="Commodity">
				 <view>
					 <view>包子馒头</view>
					 <view>包含 93 个商品</view>
				 </view>
				 <image src="../../static/management/jiantou3.png" mode=""></image>
			 </view>
			 <view class="Commodity">
			 	 <view>
			 		 <view>盖浇饭</view>
			 		 <view>包含 93 个商品</view>
			 	 </view>
			 	 <image src="../../static/management/jiantou3.png" mode=""></image>
			  </view>
			  <view class="Commodity">
			  	 <view>
			  		 <view>时令水果</view>
			  		 <view>包含 93 个商品</view>
			  	 </view>
			  	 <image src="../../static/management/jiantou3.png" mode=""></image>
			   </view>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {};
	},
	components: {
		statusBar
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.Merchandise {
	background: #FFFFFF!important;
	height: 100vh;
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 30upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0; 
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.search {
		// 微信小程序
		/* #ifdef  MP-WEIXIN */

		padding-top: 100upx;
		/* #endif */
		// 手机端
		/* #ifdef APP-PLUS */
		padding-top: 100upx;
		/* #endif */
		// H5端
		/* #ifdef  H5 */
		padding-top: 150upx;
		/* #endif */
		& > view:nth-child(1) {
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
            padding: 0 30upx 37upx;
			border-bottom: 1upx solid #EDF0FA;
			image {
				width: 38upx;
				height: 38upx;
			}

			input {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 15upx;
				border: none;
				background: none;
				width: 100%;
				
			}
		}
	}

   .group{
	  
	   &>view:nth-child(1){
		   font-size:28upx;
		   font-family:Source Han Sans CN;
		   font-weight:400;
		   color:rgba(153,153,153,1);
		   border-bottom: 1upx solid #EDF0FA;
		   margin-top: 45upx;
		   width: 100%;
		   padding: 26upx 35upx;
	   }
	   .Commodity{
		   display: flex;
		   align-items: center;
		   justify-content: space-between;
		   padding: 39upx 33upx;
		   &>view:nth-child(1){
			   
			   &>view:nth-child(1){
				   font-size:32upx;
				   font-family:Source Han Sans CN;
				   font-weight:400;
				   color:#333333;
			   }
			   &>view:nth-child(2){
				   font-size:28upx;
				   font-family:Source Han Sans CN;
				   font-weight:400;
				   color:#666666;
				   margin-top: 32upx;
			   }
		   }
		   image{
			   width: 27upx;
			   height: 30upx;
			   display: flex;
		   }
	   }
   }
}
</style>
